<template>
  <div
    class="w-screen h-screen big-screen min-w-[1280px] min-w-[720px] overflow-hidden"
  >
    <div class="flex w-full h-[6%] items-center">
      <div class="flex-1 text-sm h-[48%] pl-[6%] text-white">
        北京市
      </div>
      <div class="flex-1 text-sm text-center flex justify-center relative">
        <img
          :src="logo"
          alt="logo"
          class="absolute w-[5%] top-[45%] left-[14.5%]"
        />
        <img
          class="w-[70%] mt-[7%]"
          :src="title"
          alt="招标中心穿透式财务监管平台"
        />
      </div>
      <div class="flex-1 text-sm h-[48%] text-right pr-[6%] text-white">
        {{ systemTime }}
      </div>
    </div>
    <vDigitalHome @toStatistics="change" v-show="tabname == 'digital'" />
    <div class="yysrtj-main h-[94%]" v-if="tabname == 'yysrtj'">
      <yysrtj @onBack="tabname = 'digital'"></yysrtj>
    </div>
    <div class="yycbtj-main h-[94%]" v-if="tabname == 'yycbtj'">
      <yycbtj @onBack="tabname = 'digital'"></yycbtj>
    </div>
  </div>
</template>
 
<script setup>
import { ref, defineEmits, onBeforeUnmount } from "vue";
import yycbtj from "@/views/digital/yycbtj.vue";
import yysrtj from "@/views/digital/yysrtj.vue";
import vDigitalHome from "@/views/digital/digital-home.vue";
import { type } from "@/views/demos/components/alert/demoCodeAlert";
import title from "@/assets/images/screen/title.png";
import logo from "@/assets/images/screen/logo.png";
import { useHome } from "@/views/digital/composables/useHome";
const { getSystemTime, systemTime, tabname } = useHome();
let sh = setInterval(() => {
  getSystemTime();
}, 1000);

definePage({
  meta: {
    layout: "blank",
    public: true,
  },
});
// type ITabname = "digital" | "yysrtj" | "yycbtj";
// const tabname = ref("digital");
const change = (type) => {
  tabname.value = type;
};

onBeforeUnmount(() => {
  clearInterval(sh);
});


import { BalanceList } from "@/api/system/BankBalanceInquiry";
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    account: null,
    accName: "",
    bankName: "",
    bankAcc: "",
  },
});
const { queryParams } = toRefs(data);
/** 查询列表 */
const getList = async () => {
  const res = await BalanceList(queryParams.value);
};
onMounted(() => {
  getList();
});
</script>
 
<style lang="scss"  >
@use "@core/scss/template/libs/apex-chart.scss";
@import "@core/scss/template/digital.scss";
html {
  overflow-y: hidden;
}
.digtal-container {
  // background-image: url("../../assets/images/Digital/background.png");
  width: 100vw;
  height: 100vh;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;

  .header {
    height: vh(93);
  }
  .digtal-main {
    height: calc(100vh - vh(93));
    padding: vh(43) vw(96) vh(43) vw(160);
    display: flex;
    justify-content: space-between;
    .main-left {
      background-color: aqua;
      height: 100%;
      width: vw(496);
    }
    .main-right {
      width: vw(1664);
      background: yellow;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      > div {
        height: calc(50% - vh(8));
      }
      .yysrtj {
        height: calc(50% - vh(8));
      }
    }
  }

  .yysrtj-main {
    height: calc(100vh - vh(93));
    width: 100%;
  }
  .yycbtj-main {
    height: calc(100vh - vh(93));
    width: 100%;
  }
}
.big-screen {
  background: url("@/assets/images/screen/bg.png") no-repeat;
  background-size: 100% 100%;
}
</style>
<style>
html {
  overflow: hidden;
}
</style>
